<template>
  <view class="container position-relative">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view style="margin-bottom: 130rpx">
      <view class="section-1">
        <!-- <template v-if="store.distance >= 0"> -->
        <list-cell class="location" v-if="!isScan">
          <!-- <view class="flex-fill d-flex justify-content-between align-items-center" v-if="isScan">
							<view class="store-name flex-fill">堂食点餐</view>
						</view> -->
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="store-name flex-fill">{{
              orderType == 'takeout'
                ? currentLanguageTexts.takeoutDelivery
                : currentLanguageTexts.orderAndPickUp
            }}</view>
            <uv-switch activeColor="#09b4f1" v-model="active" @change="takout">
            </uv-switch>
          </view>
        </list-cell>
        <!-- 		</template> -->

        <!-- 	<template > -->
        <list-cell @click="chooseAddress" v-if="orderType == 'takeout'">
          <view v-if="address.realName" class="w-100 d-flex flex-column">
            <view
              class="d-flex align-items-center justify-content-between mb-10"
            >
              <view class="font-size-lg text-color-base">
                {{ address.address + ' ' + address.detail }}
              </view>
              <image src="/static/images/navigator-1.png" class="arrow"></image>
            </view>
            <view
              class="d-flex text-color-assist font-size-sm align-items-center"
            >
              <view class="mr-10">{{ address.realName }}</view>
              <view>{{ address.phone }}</view>
            </view>
          </view>
          <view
            v-else
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="store-name flex-fill">{{
              currentLanguageTexts.shippingAddress
            }}</view>
            <image src="/static/images/navigator-1.png" class="arrow"></image>
          </view>
        </list-cell>
        <!-- 	</template> -->
      </view>

      <view class="section-1">
        <!-- <template> -->
        <list-cell class="location" @click="goToShop">
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="store-name flex-fill">{{ store.name }}</view>
            <image src="/static/images/navigator-1.png" class="arrow"></image>
          </view>
        </list-cell>
        <!-- 	</template> -->

        <!-- 	<template> -->
        <list-cell arrow class="meal-time" v-if="orderType == 'takein'">
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
            @click="openPicker"
          >
            <view class="title">{{ currentLanguageTexts.pickupTime }}</view>
            <view class="time">
              {{
                getTimeName ? getTimeName : currentLanguageTexts.mealImmediately
              }}
              <uv-picker
                ref="picker"
                :columns="takeinRange"
                keyName="name"
                @cancel="takeinCancelTime"
                @confirm="takeinConfirmTime"
                :confirmText="currentLanguageTexts.confirm"
                :cancelText="currentLanguageTexts.cancel"
              ></uv-picker>
            </view>
          </view>
        </list-cell>
        <list-cell
          class="contact"
          last
          :hover="false"
          v-if="orderType == 'takein'"
        >
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="title flex-fill">{{
              currentLanguageTexts.secondContactTel
            }}</view>
            <view class="time"
              ><input
                class="text-right"
                :placeholder="currentLanguageTexts.LoginPhonePlaceholder"
                :value="member.mobile"
              />
            </view>
            <button class="contact-tip font-size-sm">
              {{ currentLanguageTexts.autoFill }}
            </button>
          </view>
        </list-cell>
        <!-- 	</template> -->
        <!-- <template > -->
        <list-cell v-if="orderType == 'takeout'">
          <view class="w-100 d-flex flex-column">
            <view
              class="d-flex align-items-center font-size-base text-color-base"
            >
              <view class="flex-fill">{{
                currentLanguageTexts.estimatedDeliveryTime
              }}</view>
              <view class="mr-10">
                {{ defaultTime }}
              </view>
            </view>
          </view>
        </list-cell>
        <!-- </template> -->
      </view>
      <!-- 购物车列表 begin -->
      <view class="section-2">
        <view class="cart d-flex flex-column">
          <list-cell last v-for="(item, index) in cart" :key="index">
            <view class="w-100 d-flex flex-column">
              <view class="d-flex align-items-center mb-10">
                <view
                  class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"
                >
                  <image
                    style="width: 80rpx; height: 80rpx"
                    mode="aspectFill"
                    :src="item.image"
                  >
                  </image>
                </view>
                <view class="name-and-props overflow-hidden">
                  <view class="text-color-base font-size-lg">{{
                    item.name
                  }}</view>
                </view>
                <view
                  class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"
                >
                  <view>x{{ item.number }}</view>
                  <view>${{ item.price }}</view>
                </view>
              </view>
              <view class="text-truncate font-size-base text-color-assist">{{
                item.valueStr
              }}</view>
            </view>
          </list-cell>
        </view>
        <list-cell arrow @click="goToPackages">
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="text-color-base">{{
              currentLanguageTexts.coupon
            }}</view>
            <view v-if="coupons == 0" class="text-color-base">{{
              currentLanguageTexts.noData
            }}</view>
            <view v-else-if="coupon.title" class="text-color-danger">
              {{ coupon.title }}(满{{ coupon.least }}减{{ coupon.value }})
            </view>
            <view v-else class="text-color-primary"
              >可用优惠券{{ coupons }}张</view
            >
          </view>
        </list-cell>
        <list-cell>
          <view
            class="flex-fill d-flex justify-content-between align-items-center"
          >
            <view class="text-color-base">{{
              currentLanguageTexts.memberDiscount
            }}</view>
            <view
              v-if="member.cardId == 0 || member.cardId == ''"
              class="text-color-base"
              >{{ currentLanguageTexts.noDiscount }}</view
            >
            <view v-else class="text-color-danger">
              {{ member.cardName }}(享受{{ member.discount }}者优惠)
            </view>
            <!-- 	<view v-else class="text-color-primary">可用优惠券{{ coupons }}张</view> -->
          </view>
        </list-cell>
        <list-cell last>
          <view class="flex-fill d-flex justify-content-end align-items-center">
            <view>
              {{ currentLanguageTexts.total }}${{ total }}
              <text v-if="orderType == 'takeout'"
                >,{{ currentLanguageTexts.deliveryFee }}${{
                  store.deliveryPrice
                }}</text
              >
              <text v-if="coupon.value">,$-{{ coupon.value }}</text>
              <text v-if="deductionPrice > 0">,$-{{ deductionPrice }}</text>
              ,{{ currentLanguageTexts.actualPayment }}
            </view>
            <view class="font-size-extra-lg font-weight-bold"
              >${{ amount }}</view
            >
          </view>
        </list-cell>
      </view>
      <!-- 购物车列表 end -->
      <view
        class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
        style="padding: 20rpx 0"
      >
      </view>
      <!-- 支付方式 begin -->
      <view class="payment" v-if="!isScan">
        <list-cell last :hover="false"
          ><text>{{ currentLanguageTexts.payWay }}</text></list-cell
        >
        <list-cell>
          <view
            class="d-flex align-items-center justify-content-between w-100 disabled"
            @click="setPayType('yue')"
          >
            <view
              class="iconfont iconbalance line-height-100 payment-icon"
            ></view>
            <view class="flex-fill"
              >{{ currentLanguageTexts.balancePayment }}（{{
                currentLanguageTexts.balance
              }}${{ member.nowMoney }}）</view
            >
            <view class="font-size-sm" v-if="member.nowMoney == 0">{{
              currentLanguageTexts.insufficientBalance
            }}</view>
            <view
              class="iconfont line-height-100 checkbox checked iconradio-button-on"
              v-if="payType == 'yue'"
            >
            </view>
            <view
              class="iconfont line-height-100 checkbox iconradio-button-off"
              v-else
            ></view>
          </view>
        </list-cell>
        <list-cell last>
          <view
            class="d-flex align-items-center justify-content-between w-100"
            @click="setPayType('weixin')"
          >
            <view
              class="iconfont iconwxpay line-height-100 payment-icon"
              style="color: #7eb73a"
            ></view>
            <view class="flex-fill">{{ currentLanguageTexts.wxPay }}</view>
            <view
              class="iconfont line-height-100 checkbox checked iconradio-button-on"
              v-if="payType == 'weixin'"
            >
            </view>
            <view
              class="iconfont line-height-100 checkbox iconradio-button-off"
              v-else
            ></view>
          </view>
        </list-cell>
        <!-- #ifdef H5 -->
        <list-cell>
          <view
            class="d-flex align-items-center justify-content-between w-100"
            @click="setPayType('alipay')"
          >
            <view
              class="iconfont-yshop icon-alipay line-height-100 payment-icon"
              style="color: #07b4fd"
            ></view>
            <view class="flex-fill">{{ currentLanguageTexts.Alipay }}</view>
            <view
              class="iconfont line-height-100 checkbox checked iconradio-button-on"
              v-if="payType == 'alipay'"
            ></view>
            <view
              class="iconfont line-height-100 checkbox iconradio-button-off"
              v-else
            ></view>
          </view>
        </list-cell>
        <!-- #endif -->
      </view>
      <!-- 支付方式 end -->
      <!-- 备注 begin -->
      <list-cell last @click="goToRemark">
        <view
          class="d-flex flex-fill align-items-center justify-content-between overflow-hidden"
          style="margin-bottom: 110rpx"
        >
          <view class="flex-shrink-0 mr-20">{{
            currentLanguageTexts.notes
          }}</view>
          <view class="text-color-primary flex-fill text-truncate text-right"
            >{{ form.remark || currentLanguageTexts.clickToFillInTheRemarks }}
          </view>
        </view>
      </list-cell>
      <!-- 备注 end -->
    </view>
    <!-- 付款栏 begin -->
    <view
      style="z-index: 1"
      class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white"
    >
      <view class="font-size-sm" style="margin-left: 20rpx"
        >{{ currentLanguageTexts.amountTo }}：</view
      >
      <span class="font-size-lg flex-fill">${{ amount }}
		<currency :price="amount"></currency>
	  </span>
	  
      <view
        class="bg-primary h-100 d-flex align-items-center just-content-center font-size-base"
        style="padding: 0 80rpx"
        @tap="debounce(sumbmitOrder, 500)"
        v-if="isScan"
        >{{ currentLanguageTexts.submitOrder }}</view
      >
      <view
        class="bg-primary h-100 d-flex align-items-center just-content-center font-size-base"
        style="padding: 0 80rpx"
        @tap="debounce(submit, 500)"
        v-else
        >{{ currentLanguageTexts.payment }}</view
      >
    </view>
    <!-- 付款栏 end -->
    <modal
      :show="ensureAddressModalVisible"
      custom
      :mask-closable="false"
      :radius="'0rpx'"
      width="90%"
    >
      <view class="modal-content">
        <view class="d-flex justify-content-end">
          <image
            src="/static/images/pay/close.png"
            style="width: 40rpx; height: 40rpx"
            @tap="ensureAddressModalVisible = false"
          ></image>
        </view>
        <view
          class="d-flex just-content-center align-items-center"
          style="margin-bottom: 40px"
        >
          <view class="font-size-extra-lg text-color-base">{{
            currentLanguageTexts.pleaseConfirmTheOrderingAddressAgain
          }}</view>
        </view>
        <view
          class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20"
        >
          <view>{{ address.realName }}</view>
          <view>{{ address.phone }}</view>
        </view>
        <view
          class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40"
        >
          <view style="max-width: 60%">{{
            address.address + address.detail
          }}</view>
          <button
            type="primary"
            size="mini"
            plain
            class="change-address-btn"
            style="white-space: nowrap"
            @click="chooseAddress"
          >
            {{ currentLanguageTexts.modifyAddress }}
          </button>
        </view>
        <button type="primary" class="pay_btn" @tap="debounce(pay, 500)">
          {{ currentLanguageTexts.confirmAndMakePayment }}
        </button>
      </view>
    </modal>
    <uv-toast ref="uToast"></uv-toast>
  </view>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { onLoad, onShow, onPullDownRefresh, onHide } from '@dcloudio/uni-app';
import { formatDateTime, isWeixin } from '@/utils/util';
import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce';
import currency from '@/components/currency/currency.vue';

import { orderSubmit, payUnify, getWechatConfig } from '@/api/order';
import { couponCount } from '@/api/coupon';
// #ifdef H5
import * as jweixin from 'weixin-js-sdk';
// #endif
const main = useMainStore();
const {
  orderType,
  address,
  store,
  location,
  isLogin,
  member,
  mycoupon,
  isScan,
  desk,
  uidType,
  currentLanguageTexts,
  currentLanguage,
} = storeToRefs(main);
const active = ref(false);
const title = isScan
  ? ref(currentLanguageTexts.value.placeorder)
  : ref(currentLanguageTexts.value.payment);
const jsStr = ref('');
const cart = ref([]);
const form = ref({
  remark: '',
});
const ensureAddressModalVisible = ref(false);
const takeoutTIme = ref(false); // 外卖取餐时间picker
const paramsTime = ref({
  year: false,
  month: false,
  day: false,
  hour: true,
  minute: true,
  second: false,
});
const defaultTime = ref('00:00');
const takeinRange = ref([
  [
    {
      name: currentLanguageTexts.value.Eatnow,
      value: 0,
    },
    {
      name: '10' + currentLanguageTexts.value.Minuteslater,
      value: 10,
    },
    {
      name: '20' + currentLanguageTexts.value.Minuteslater,
      value: 20,
    },
    {
      name: '30' + currentLanguageTexts.value.Minuteslater,
      value: 30,
    },
    {
      name: '40' + currentLanguageTexts.value.Minuteslater,
      value: 40,
    },
    {
      name: '50' + currentLanguageTexts.value.Minuteslater,
      value: 50,
    },
  ],
]);
const defaultSelector = ref([0]);
const payType = ref('weixin'); // 付款方式
const coupons = ref(0); // 可用优惠券数量
const coupon = ref(main.mycoupon); // 选中的
const deductionPrice = ref(0);
const getTime = ref(0);
const getTimeName = ref('');

const uToast = ref();

const total = computed(() => {
  return cart.value.reduce((acc, cur) => acc + cur.number * cur.price, 0);
});
const amount = computed(() => {
  let amount = cart.value.reduce((acc, cur) => acc + cur.number * cur.price, 0);
  //会员折扣
  if (member.value.cardId > 0) {
    let deduct = (amount - amount * (member.value.discount / 10)).toFixed(2);
    deductionPrice.value = deduct;
    amount = amount - deduct;
  }
  // 加配送费
  if (store.value.distance > 0 && orderType.value == 'takeout') {
    amount += parseFloat(store.value.deliveryPrice);
  }

  // 减去优惠券
  if (main.mycoupon.hasOwnProperty('id')) {
    amount -= parseFloat(main.mycoupon.value);
  }
  return amount.toFixed(2);
});

onShow(() => {
  coupon.value = main.mycoupon;
  let date = new Date(new Date().getTime() + 3600000); // 一个小时后
  let hour = date.getHours();
  let minute = date.getMinutes();
  if (hour < 10) {
    hour = '0' + hour;
  }
  if (minute < 10) {
    minute = '0' + minute;
  }
  defaultTime.value = hour + ':' + minute;

  if (orderType.value == 'takeout') {
    active.value = true;
  } else {
    active.value = false;
  }

  getCoupons();

  let paytype = uni.getStorageSync('paytype');
  payType.value = paytype ? paytype : 'weixin';
});
onHide(() => {
  coupons.value = 0;
});
onLoad((option) => {
  if (orderType.value == '' || !store.value.id) {
    uni.switchTab({
      url: '/pages/index/index',
    });
    return;
  }
  cart.value = uni.getStorageSync('cart');
  if (option.remark) {
    form.value.remark = option.remark;
  }
});

// 更改支付方式
const setPayType = (paytype) => {
  payType.value = 'weixin';
  payType.value = paytype;
  uni.setStorage({
    key: 'paytype',
    data: paytype,
  });
};
const getCoupons = async () => {
  //0=通用,1=自取,2=外卖
  let type = orderType.value == 'takein' ? 1 : 2;
  let data = await couponCount({
    shop_id: store.value.id ? store.value.id : 0,
    type: type,
  });
  if (data) {
    coupons.value = data;
  }
};

const cancelTime = (value) => {
  takeoutTIme.value = false;
};
// 到店自取-取消选择取餐时间
const takeinCancelTime = (value) => {};
// 到店自取-选择取餐时间
const takeinConfirmTime = (e) => {
  getTime.value = e.value[0].value;
  getTimeName.value = e.value[0].name;
};
const picker = ref();
const openPicker = () => {
  picker.value.open();
};
// 是否外卖开关
const takout = (value) => {
  let type = 'takeout';
  if (value == false) {
    type = 'takein';
  }
  main.SET_ORDER_TYPE(type);

  // 如果存在优惠券看看需不需要清除
  if (coupon.value.hasOwnProperty('type')) {
    //0=通用,1=自取,2=外卖
    if (coupon.value.type != 0) {
      if (coupon.value.type == 1 && orderType.value == 'takeout') {
        coupon.value = {};
      }
      if (coupon.value.type == 2 && orderType.value == 'takeint') {
        coupon.value = {};
      }
    }
  }
  coupons.value = 0;
  getCoupons();
};
const goToRemark = () => {
  uni.navigateTo({
    url: '/pages/components/pages/remark/remark?remark=' + form.value.remark,
  });
};
const chooseAddress = () => {
  uni.navigateTo({
    url: '/pages/components/pages/address/address?is_choose=true&scene=pay',
  });
};
const goToPackages = () => {
  let newamount = amount.value;
  let coupon_id = coupon.value.id ? coupon.value.id : 0;
  let type = orderType.value == 'takein' ? 1 : 2;
  let shop_id = store.value.id;
  uni.navigateTo({
    url:
      '/pages/components/pages/packages/index?amount=' +
      newamount +
      '&coupon_id=' +
      coupon_id +
      '&shop_id=' +
      shop_id +
      '&type=0',
  });
};
const goToShop = () => {
  uni.navigateTo({
    url: `/pages/components/pages/shop/shop`,
  });
};
const submit = () => {
  if (orderType.value == 'takeout') {
    // 外卖类型
    if (typeof address.value.id == 'undefined') {
      uToast.value.show({
        message: currentLanguageTexts.value.selectRecipientAddress,
        type: 'error',
      });
      return;
    }
    // 配送范围
    // ...

    // 起送价钱
    if (store.value.min_price > total.value) {
      uToast.value.show({
        message:
          currentLanguageTexts.value.Thestoreis + '$' + store.value.min_price,
        type: 'error',
      });
      return;
    }

    pay();
  } else {
    pay();
  }
};

const sumbmitOrder = async () => {
  uni.showLoading({
    title: currentLanguageTexts.value.loading,
  });

  let data = {
    uidType: uidType.value,
    orderId: desk.value.orderId, //当这个存在当时候表示加餐
    deskId: desk.value.id,
    deskNumber: desk.value.number,
    deskPeople: desk.value.people,
    orderType: orderType.value, // 购买类型:takein=自取,takeout=外卖
    addressId: 0, // 外卖配送地址
    shopId: store.value.id, // 店铺id
    mobile: '', // 联系电话
    gettime: 0, // 取餐时间
    payType: 'weixin', // 支付类型
    remark: form.value.remark, // 备注
    productId: [],
    spec: [],
    number: [],
    couponId: coupon.value.id ? coupon.value.id : 0, // 优惠券id
    language: currentLanguage.value.key,
  };

  cart.value.forEach((item, index) => {
    data.productId.push(item.id);

    data.spec.push(item?.valueStr?.replace(/,/g, '|') || '默认');
    // if (!item.valueStr) {
    //   item.valueStr = currentLanguageTexts.value.default;
    // }

    //data.spec.push(item.valueStr);
    data.number.push(item.number);
  });
  let order = await orderSubmit(data);
  if (order) {
    main.DEL_DESK();
    main.DEL_COUPON();
    main.SET_ORDER_TYPE('takein');
    uni.hideLoading();
    uni.removeStorageSync('cart');
    //如果市店员协助点餐提交订单后 跳转到商家中心桌台
    if (uidType.value == 'admin') {
      uni.navigateTo({
        url: '/pages/components/pages/merchant/bell',
      });
      main.SET_UID_TYPE('user');
    } else {
      uni.navigateTo({
        url: '/pages/components/pages/orders/detail?id=' + order.orderId,
      });
    }
  }
};

const pay = async () => {
  // // #ifdef MP-WEIXIN
  // await new Promise(function (revolve) {
  //   //订阅号信息id
  //   let subscribeMss = ['KBtfY9G1IWCzC6q-ZKo-Q-MmdP7aaF79nx0XFcBf3h4'];

  //   wx.showModal({
  //     title: currentLanguageTexts.value.tip,
  //     content: currentLanguageTexts.value.Totransaction,
  //     confirmText: currentLanguageTexts.value.agree,
  //     cancelText: currentLanguageTexts.value.refuse,
  //     success: function (res) {
  //       if (res.confirm) {
  //         uni.requestSubscribeMessage({
  //           tmplIds: subscribeMss,
  //           complete(res) {
  //             revolve(true);
  //           },
  //         });
  //       } else {
  //         revolve(true);
  //       }
  //     },
  //   });
  // });

  // // #endif
  uni.showLoading({
    title: currentLanguageTexts.value.loading,
  });

  let data = {
    uidType: uidType.value,
    orderType: orderType.value, // 购买类型:takein=自取,takeout=外卖
    addressId: orderType.value == 'takeout' ? address.value.id : 0, // 外卖配送地址
    shopId: store.value.id, // 店铺id
    mobile: member.value.mobile, // 联系电话
    gettime: getTime.value, // 取餐时间
    payType: payType.value, // 支付类型
    remark: form.value.remark, // 备注
    productId: [],
    spec: [],
    number: [],
    couponId: coupon.value.id ? coupon.value.id : 0, // 优惠券id
    language: currentLanguage.value.key,
  };

  cart.value.forEach((item, index) => {
    data.productId.push(item.id);
    // if (!item.valueStr) {
    //   item.valueStr = currentLanguageTexts.value.default;
    // }
    data.spec.push(item.valueStr?.replace(/,/g, '|') || '默认');
    //data.spec.push(item.valueStr);
    data.number.push(item.number);
  });

  let order = await orderSubmit(data);
  if (!order) {
    uni.hideLoading();
    return;
  }

  main.DEL_COUPON();

  if (payType.value == 'weixin') {
    // 微信支付
    weixinPay(order);
  } else if (payType.value == 'yue') {
    // 余额支付
    balancePay(order);
  } else if (payType.value == 'alipay') {
    // 余额支付
    aliPay(order);
  }
  uni.hideLoading();
  return;
};

const balancePay = async (order) => {
  let from = 'routine';
  // #ifdef H5
  from = 'h5';
  // #endif
  let pay = await payUnify({
    uni: order.orderId,
    from: from,
    paytype: 'yue',
  });

  uni.hideLoading();
  if (!pay) {
    return;
  }

  member.value.money -= amount.value;
  main.SET_MEMBER(member.value);
  try {
    uni.removeStorageSync('cart');
  } catch (e) {}

  uni.navigateTo({
    url: '/pages/components/pages/orders/detail?id=' + order.orderId,
  });
};
const weixinPay = async (order) => {
  let from = 'routine';
  // #ifdef H5
  from = 'h5';
  if (isWeixin()) {
    from = 'wechat';
  }

  // #endif
  //let that = this;
  let data = await payUnify({
    uni: order.orderId,
    from: from,
    paytype: 'weixin',
  });
  if (!data) {
    uni.hideLoading();
    return;
  }
  if (data.trade_type == 'MWEB') {
    // #ifdef H5
    // 微信外的H5
    location.href = data.data;
    // #endif
  } else if (data.trade_type == 'JSAPI') {
    // #ifdef MP-WEIXIN
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: data.data.timeStamp,
      nonceStr: data.data.nonceStr,
      package: data.data.package,
      signType: 'MD5',
      paySign: data.data.paySign,
      success: function (res) {
        uni.removeStorageSync('cart');
        uni.navigateTo({
          url: '/pages/components/pages/orders/detail?id=' + order.orderId,
        });
        // uni.switchTab({
        // 	url: '/pages/order/order'
        // });
      },
      fail: function (err) {},
    });
    // #endif
  } else if (data.trade_type == 'W-JSAPI') {
    //公众号支付
    let config = await getWechatConfig();
    if (config) {
      jweixin.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: ['chooseWXPay'],
      });
      jweixin.ready(function () {
        jweixin.chooseWXPay({
          timestamp: data.data.timeStamp,
          nonceStr: data.data.nonceStr,
          package: data.data.package,
          signType: 'MD5',
          paySign: data.data.paySign,
          success: function (res) {
            uni.removeStorageSync('cart');
            uni.navigateTo({
              url: '/pages/components/pages/orders/detail?id=' + order.orderId,
            });
            // uni.switchTab({
            //  url: '/pages/order/order'
            // });
          },
          fail: function (err) {},
        });
      });
      jweixin.error(function (res) {});
    } else {
    }
  }
};
const aliPay = async (order) => {
  // #ifdef H5
  //let that = this;
  if (isWeixin()) {
    uni.showToast({
      title: currentLanguageTexts.value.PleaseAlipaypayment,
      icon: 'none',
    });
    return;
  }
  let data = await payUnify({
    uni: order.orderId,
    from: 'h5',
    paytype: 'alipay',
  });

  // 支付宝支付，这里只要提交表单
  let form = data.data;
  const div = document.createElement('formdiv');
  div.innerHTML = form;
  document.body.appendChild(div);
  //document.forms[0].setAttribute('target', ' self');
  document.forms[0].submit();
  //div.remove();

  // #endif
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.arrow {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  margin-right: -10rpx;
}

.location {
  .store-name {
    font-size: $font-size-lg;
  }

  .iconfont {
    font-size: 50rpx;
    line-height: 100%;
    color: $color-primary;
  }
}

.section-1 {
  margin-bottom: 30rpx;

  .contact {
    .contact-tip {
      margin-left: 10rpx;
      border: none;
      box-shadow: none;
      background: $color-primary;
      color: rgb(90, 91, 92);
    }
  }
}

.section-2 {
  .name-and-props {
    width: 65%;
  }
}

.payment {
  margin-bottom: 30rpx;

  .disabled {
    color: $text-color-grey;
  }

  .payment-icon {
    font-size: 44rpx;
    margin-right: 10rpx;
  }

  .checkbox {
    font-size: 36rpx;
    margin-left: 10rpx;
  }

  .checked {
    color: $color-primary;
  }
}

.pay-box {
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  height: 100rpx;
}

.modal-content {
  .change-address-btn {
    line-height: 2;
    padding: 0 1em;
  }

  .pay_btn {
    width: 100%;
    border-radius: 50rem !important;
    line-height: 3;
  }
}

.choice {
  background-color: $bg-color-grey;
  border-radius: 38rpx;
  display: flex;
  align-items: center;
  font-size: $font-size-sm;
  padding: 0 38rpx;
  color: $text-color-assist;

  .dinein,
  .takeout {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;

    &.active {
      padding: 14rpx 38rpx;
      color: #ffffff;
      background-color: $color-primary;
      border-radius: 38rpx;
    }
  }

  .takeout {
    margin-left: 20rpx;
    height: 100%;
    flex: 1;
    padding: 14rpx 0;
  }

  .dinein.active {
    //margin-left: -38rpx;
  }

  .takeout.active {
    //margin-right: -38rpx;
  }
}
</style>
